<template>
    <div>
            <el-menu class="el-menu-vertical-demo" >
                <el-sub-menu :index="(index+1).toString()" v-for="(item,index) in navlist" :key="index">
                    <template #title>
                        <el-icon v-if="index==0"><Open /></el-icon>
                        <el-icon v-else-if="index==1"><PieChart /></el-icon>
                        <el-icon v-else-if="index==2"><Compass /></el-icon>
                        <el-icon v-else-if="index==3"><Coin /></el-icon>
                        <span>{{item.catagory}}</span>
                     
                    </template>
                        <el-menu-item :index="((index+1)+'-'+(i+1)).toString()" v-for="(list,i) in item.list" :key="i" @click="$emit('handle',list.cid)">
                            {{ list.name }}
                        </el-menu-item>
       
                    </el-sub-menu>
        </el-menu>
      
    </div>
</template>
<script>
import axios from 'axios';
import { Open,PieChart,Compass,Coin} from '@element-plus/icons-vue';

export default{
    mounted(){
        axios.get('navlist.json').then(res=>{
            this.navlist = res.data.navlist;
            
        })
    },
    data(){
        return{
            navlist:[],
            
            //nav:[{id:'1',name:'大梦归离'},{id:'2',name:'idol'},{id:'3',name:'综艺'}]
        }
    },
    components:{
        Open,
        PieChart,
        Compass,
        Coin
    },
    methods:{
        clickHandle(cid){
            this.$emit('handle',cid)

        }
    }
}
</script>